<template>
  <div id="cesiumContainer"></div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Cesium",
});
import "../../../public/Widgets/widgets.css";
import * as Cesium from "cesium";
import { onMounted } from "vue";
window.CESIUM_BASE_URL = "/";
Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NWM0ZDMxNS04YzhhLTQ0ODMtOGNlMi04NzVlMzA5NDU0OWUiLCJpZCI6Mjg4OTQ5LCJpYXQiOjE3NDMyNTI5NzZ9.PcrboUc2tPQSGH_ALxdkaqa50GgGQkLS58hGo3FAzPI";

// 默认点位
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);
onMounted(async () => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, //查询按钮
    homeButton: false, // 不显示home按钮
    sceneModePicker: false, // 查看器的显示模式
    baseLayerPicker: false, // 是否显示图层选择
    navigationHelpButton: false, // 显示帮助按钮
    animation: false, // 播放动画
    timeline: false, //时间轴
    fullscreenButton: false, // 显示全屏按钮
    vrButton: false, //
    // baseLayer: Cesium.ImageryLayer.fromProviderAsync(
    //   Cesium.ArcGisMapServerImageryProvider.fromBasemapType(
    //     Cesium.ArcGisBaseMapType.SATELLITE
    //   )
    // ),
    terrain: Cesium.Terrain.fromWorldTerrain(),
  });

  // let rectGeometry = new Cesium.RectangleGeometry({
  //   rectangle: Cesium.Rectangle.fromDegrees(
  //     // 西边的经度
  //     115,
  //     // 南边维度
  //     20,
  //     // 东边经度
  //     135,
  //     // 北边维度
  //     30
  //   ),
  //   // 距离表面高度
  //   height: 0,
  //   vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  // });

  // viewer.entities.add({
  //   polygon: {
  //     hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(
  //       [106.588737079, 29.5699635, 500] // 只使用经纬度 格式为 [经度1,纬度1,高度1,经度2,纬度2,高度2,...]
  //     ),
  //     material: Cesium.Color.fromBytes(64, 157, 253, 200),
  //     perPositionHeight: true, // 关键：使用每个点的高度   一般为起始高度 // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 高度参考
  //     extrudedHeight: 0, // 从地面向上挤压10米,一般为最终高度
  //   },
  // });

  const osmBuildingsTileset = await Cesium.createOsmBuildingsAsync();
  viewer.scene.primitives.add(osmBuildingsTileset);

  // 定义点位坐标（经度、纬度、高度，WGS84坐标系）
  const position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 500); // 示例坐标（北京）

  // 创建 Entity 并添加到场景中
  const cylinderEntity = viewer.entities.add({
    name: "圆柱体",
    position: position,
    cylinder: {
      // 圆柱体属性
      height: 500, // 高度（米）
      topRadius: 500.0, // 顶部半径（米）
      bottomRadius: 500.0, // 底部半径（米），若为0则为圆锥体
      material: Cesium.Color.RED, // 材质（颜色）
      outline: true, // 是否显示轮廓
      outlineColor: Cesium.Color.WHITE, // 轮廓颜色
      outlineWidth: 2, // 轮廓宽度
      heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, // 高度模式（相对于地面）
      // 其他样式属性：
      // transparency: 0.8, // 透明度（0-1）
      // disableDepthTest: false, // 是否禁用深度测试（控制遮挡关系）
    },
  });
  // 修改颜色为蓝色
  cylinderEntity.cylinder.material = Cesium.Color.BLUE;

  // 修改高度为80米
  cylinderEntity.cylinder.height = 800;

  // 修改顶部半径为3米（底部半径不变）
  cylinderEntity.cylinder.topRadius = 300.0;

  // 设置渐变材质（高级用法，需使用 MaterialProperty）
  cylinderEntity.cylinder.material = new Cesium.LinearGradientMaterialProperty({
    colorStops: [
      { offset: 0.0, color: Cesium.Color.RED },
      { offset: 1.0, color: Cesium.Color.YELLOW },
    ],
    // direction: Cesium?.MaterialDirection.VERTICAL, // 垂直渐变
  });
  // // 创建事件处理器，监听画布上的鼠标事件
  // const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // // 方法一：使用常量名称（推荐，更易读）
  // handler.setInputAction(function (movement) {
  //   console.log("左键单击！", movement.position);
  // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  // viewer.scene.camera.setView({
  //   // 重庆市 106.552003   29.562696
  //   // 美国 -74.019, 40.6912,
  //   destination: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 500),
  //   orientation: {
  //     heading: Cesium.Math.toRadians(-130), // 水平旋转角度（向右偏5度）
  //     pitch: Cesium.Math.toRadians(-10), // 垂直俯仰角度（向下倾斜20度）
  //   },
  //   // duration: 0,
  // });
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
.cesium-viewer-bottom {
  display: none !important;
}
</style>
